<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$('#container').highcharts({

				chart: {
					type: 'column',
					options3d: {
						enabled: true,
						alpha: 15,
						beta: 15,
						viewDistance: 25,
						depth: 40
					},
					marginTop: 80,
					marginRight: 40
				},

				title: {
					text: 'Total fruit consumption, grouped by gender'
				},

				xAxis: {
					categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
				},

				yAxis: {
					allowDecimals: false,
					min: 0,
					title: {
						text: 'Number of fruits'
					}
				},

				tooltip: {
					headerFormat: '<b>{point.key}</b><br>',
					pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
				},

				plotOptions: {
					column: {
						stacking: 'normal',
						depth: 40
					}
				},

				series: [{
					name: 'John',
					data: [5, 3, 4, 7, 2],
					stack: 'male'
				}, {
					name: 'Joe',
					data: [3, 4, 4, 2, 5],
					stack: 'male'
				}, {
					name: 'Jane',
					data: [2, 5, 6, 2, 1],
					stack: 'female'
				}, {
					name: 'Janet',
					data: [3, 0, 4, 4, 3],
					stack: 'female'
				}]
			});
		});


	</script>
</head>
<body>

<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
</body>
</html>
